এইচটিএমএল লিস্টকে বিভিন্নভাবে মার্কিং করার জন্য সিএসএস list-* প্রোপার্টি ব্যবহার করা হয়।

এইচটিএমএল লিস্ট এবং সিএসএস লিস্ট প্রোপার্টি

এইচটিএমএলে সাধারণত দুই ধরনের লিস্ট রয়েছেঃ

• আন-অর্ডার লিস্ট (< ul>): - লিস্ট আইটেম গুলোকে বুলেট চিহ্ন দিয়ে মার্কিং করে।
• অর্ডার লিস্ট (< ol>): - লিস্ট আইটেম গুলোকে সংখ্যা বা অক্ষর দিয়ে মার্কিং করে।

সিএসএস list প্রোপার্টির মাধ্যমে আপনি নিম্নোক্ত স্টাইলসমূহ করতে পারবেনঃ

• অর্ডার লিস্টের আইটেমগুলোকে বিভিন্নভাবে মার্কিং করতে পারবেন।
• আন-অর্ডার লিস্টের আইটেমগুলোকে বিভিন্নভাবে মার্কিং করতে পারবেন।
• ইমেজ দিয়ে লিস্ট আইটেমকে মার্কিং করতে পারবেন।
• লিস্ট এবং লিস্ট আইটেমে ব্যাকগ্রাউন্ড কালার সেট করতে পারবেন।

এক নজরে সিএসএস লিস্ট প্রোপার্টিসমূহ

লিস্ট আইটেমকে বিভিন্নভাবে মার্কিং করার উপায়

লিস্টের আইটেমসমূহকে বিভিন্নভাবে মার্কিং করতে হলে সিএসএস list-style-type প্রোপার্টিটি ব্যবহার করতে হবে।

নিচের উদাহরণে লিস্টের আইটেমসমূহে কিছু মার্কারের ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=635

বিঃদ্রঃ list-style-type প্রোপার্টির কিছু ভ্যালু আন-অর্ডার লিস্টের জন্য এবং কিছু ভ্যালু অর্ডার লিস্টের জন্য ব্যবহৃত হয়।

ইমেজ দিয়ে লিস্ট আইটেম মার্কিং

ইমেজ দিয়ে লিস্ট আইটেমকেে মার্কিং করতে হলে সিএসএস list-style-image প্রোপার্টিটি ব্যবহার করতে হয়।

kt_satt_skill_example_id=637

লিস্ট আইটেমে মার্কারের পজিশন

লিস্ট আইটেমে মার্কার কন্টেন্টের ভেতরে প্রদর্শিত হবে নাকি বাহিরে প্রদর্শিত হবে তা সেট করার জন্য সিএসএস list-style-position প্রোপার্টিটি ব্যবহার করা হয়।

kt_satt_skill_example_id=640

লিস্টকে কালার করা

লিস্ট আইটেমগুলোকে আরোও দর্শনীয় করে উপস্থাপন করতে আমরা লিস্ট এবং লিস্ট আইটেমের ব্যাকগ্রাউন্ডকে কালার করতে পারি।

< ol> বা < ul> ট্যাগে কোনো স্টাইল যোগ করলে সম্পূর্ণ লিস্টেই এর প্রভাব পড়ে। কিন্তু < li> ট্যাগে স্টাইল যোগ করে আমরা লিস্ট আইটেমসমূহকে পৃথকভাবে স্টাইল করতে পারি।

kt_satt_skill_example_id=643

লিস্ট শটকার্ট প্রোপার্টি

list-style প্রোপার্টি হল লিস্টের জন্য একটি শর্টকার্ট প্রোপার্টি। একটি ডিক্লেয়ারেশনের মধ্যে সবগুলো লিস্ট প্রোপার্টি সেট করার জন্য এই প্রোপার্টি ব্যবহার করতে হয়।

শর্টকার্ট প্রোপার্টি ব্যবহার করতে হলে প্রোপার্টির নিম্নোক্ত ধারা মেনে চলতে হবেঃ

1. list-style-type:- লিস্ট আইটেমকে মার্কিং করার জন্য যদি list-style-image প্রোপার্টি সেট করা হয়, কিন্তু কোনো কারণে যদি ইমেজ না প্রদর্শিত হয় তাহলে list-style-type প্রোপার্টির ভ্যালু প্রদর্শিত হবে।
2. list-style-position:- লিস্ট আইটেমে মার্কার কন্টেন্টের ভেতরে না বাহিরে প্রদর্শিত হবে তা ঠিক করে দেয়।
3. list-style-image:- ইমেজ দিয়ে লিস্ট আইটেমকেে মার্কিং করার জন্য এটি ব্যবহার করা হয়।

উপরের কোন একটি প্রোপার্টির ভ্যালু যদি বাদ পড়ে, তাহলে বাদ পড়া প্রোপার্টির জন্য ডিফল্ট ভ্যালু যুক্ত হবে।

kt_satt_skill_example_id=645